<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-01-12 22:16:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-06-19 13:43:22
 -->
<template>
  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
    <el-input
      ref="input"
      v-model="insideVal"
      :disabled="disabled"
      @blur="onblur"
    >
      <i slot="suffix" class="el-icon-arrow-down" />
    </el-input>
    <div v-if="isShowDrop" class="optionsWrapper">
      <ul>
        <li v-for="item in data" :key="item.value">
          <a @click="() => {btnOptionClick(item)}">{{ item.label }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>

export default {
  name: 'DropDownSelect',
  props: {
    value: {
      type: [String, Number],
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => { return {} }
    },
    remoteMethod: {
      type: Function,
      default: () => { return new Promise() }
    },
    formatFun: {
      type: Function,
      default: (value) => { return value }
    }
  },
  data() {
    return {
      insideVal: null,
      isShowDrop: false,
      data: []
    }
  },
  watch: {
    value: {
      handler(val) {
        this.insideVal = this.formatFun(val)
      },
      immediate: true
    }
  },
  created() {
    // const _this = this
    // document.addEventListener('click', _this.setDropFalse)
    // this.$on('hook:beforeDestroy', () => {
    //   document.removeEventListener('click', _this.setDropFalse)
    // })
  },

  destroyed() {
  },
  methods: {
    btnOptionClick(row) {
      this.$emit('change', row)
      this.isShowDrop = false
    },
    onMouseEnter(e) {
      console.log('移来')
      this.isShowDrop = true
      const remoteMethod = this.remoteMethod
      if (!remoteMethod) return
      remoteMethod(this.row).then(data => {
        this.data = data
      })
    },
    onMouseLeave(e) {
      console.log('移走')
      this.isShowDrop = false
      // this.$refs.input.blur()
    },
    onblur(e) {
      const value = e.target.value
      this.$emit('input', value)
    }
  }
}
</script>
<style lang="scss" scoped>
.optionsWrapper{
  position:absolute; z-index: 100;
  border:solid 2px #3198ff;
  width:100%;
  background: #fff;
  ul{
    padding: 0; margin: 0;
  }
  a, a:link{
    display: block;
    padding:5px 0 5px 5px;
    border-bottom: solid 1px #eeeeee
  }
  a:hover{
    background: #eeeeee;
  }
}
</style>
